<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>能不能好好说话？</title>
	<link rel="stylesheet" href="base.css">
	<link rel="stylesheet" href="document.css">
	<meta name="viewport" content="width=device-width,user-scalable=0">
	<meta name="discription" content="拼音首字母缩写释义工具">
	<link rel="icon" type="text/css" href="ico.png">
</head>
<body>
	<div id="el">
		<textarea v-model="text" placeholder="输入含有首字母缩写的文字" @input="nbnhhsh"></textarea>

		<div class="func-nbnhhsh-box" v-if="show">
			<div class="nbnhhsh-loading" v-if="loading">
				加载中…
			</div>
			<div class="nbnhhsh-tag-list" v-else-if="tags.length">
				<div class="nbnhhsh-tag-item" v-for="tag in tags">
					<h4>{{tag.name}}</h4>
					<div class="nbnhhsh-tran-list" v-if="tag.trans">
						<span class="nbnhhsh-tran-item" v-for="tran in tag.trans">{{tran}}</span>
					</div>
					<div class="nbnhhsh-notran-box" v-else-if="tag.trans===null">
						无对应文字
					</div>
					<div v-else-if="tag.inputting && tag.inputting.length !==0">
						<div class="nbnhhsh-inputting-list">
							<h5>有可能是</h5>
							<span class="nbnhhsh-inputting-item" v-for="input in tag.inputting">{{input}}</span>
						</div>
					</div>
					<div class="nbnhhsh-notran-box" v-else @click.prevent="submitTran(tag.name)">
						尚未录入，我来提交对应文字
					</div>
					<a v-if="tag.trans!==null" @click.prevent="submitTran(tag.name)" class="nbnhhsh-add-btn" title="我来提交对应文字"></a>
				</div>
			</div>
			<div class="nbnhhsh-loading" v-else>
				没有匹配到拼音首字母缩写
			</div>

		</div>
	</div>
	
	<script src="vue.min.js"></script>
	<script src="nbnhhsh.user.js"></script>
	<script>
		let guessTimer;
		const app = new Vue({
			el,
			data: {
				text:'',
				tags:[],
				show:false,
				loading:false,
			},
			methods: {
				submitTran:Nbnhhsh.submitTran,
				nbnhhsh(){
					let text = this.text;

					app.show = !!text && /[a-z0-9]/i.test(text);

					clearTimeout(guessTimer);

					if(!app.show){
						return;
					}

					guessTimer = setTimeout(()=>{
						Nbnhhsh.guess(text,data=>{
							if(!data.length){
								app.show = false;
							}else{
								app.tags = data;
							}
						});
					},400);

					location.hash = text?'#/text/'+encodeURIComponent(text):'';
				}
			}
		});

		const searchStringArray = location.hash.substr(2).split('/');

		const Search = {};

		for(let i = 0;i<searchStringArray.length;i+=2){
			Search[decodeURIComponent(searchStringArray[i])] = decodeURIComponent(searchStringArray[i+1]);
		}


		app.text = Search.text || '';

		app.nbnhhsh();


		const loadScript = (src,el) =>{
			el = document.createElement('script');
			el.src = src;
			document.body.appendChild(el);
		};

		
	</script>
</body>
</html>